<template>
	<div class="home">
		<el-container>
			<el-header>
				<div>
					<el-row>
						<el-col :span="12">
							<span style="color: #ffffff; font-size: 24px;">好吃汉堡店</span>
						</el-col>
						<el-col :span="12">
							<el-button type="primary" v-items="{ default: true }">热销</el-button>
							<el-button type="primary" v-items>新品</el-button>
							<el-button type="primary" v-items>分类一</el-button>
							<el-button type="primary" v-items>分类二</el-button>
							<el-button type="primary" v-items>分类三</el-button>
						</el-col>
					</el-row>
				</div>
			</el-header>
			<el-main>
				<el-row :gutter="20">
					<el-col :span="6" type="flex" class="row-bg" justify="space-between">
						<div v-items class="goods">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								class="image"
							/>
							<div style="padding: 10px;">
								<span>好吃的汉堡</span>
							</div>
						</div>
					</el-col>
					<el-col :span="6" type="flex" class="row-bg" justify="space-between">
						<div v-items class="goods">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								class="image"
							/>
							<div style="padding: 10px;">
								<span>好吃的汉堡</span>
							</div>
						</div>
					</el-col>
					<el-col :span="6" type="flex" class="row-bg" justify="space-between">
						<div v-items class="goods">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								class="image"
							/>
							<div style="padding: 10px;">
								<span>好吃的汉堡</span>
							</div>
						</div>
					</el-col>

					<el-col :span="6" type="flex" class="row-bg" justify="space-between">
						<div v-items class="goods">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								class="image"
							/>
							<div style="padding: 10px;">
								<span>好吃的汉堡</span>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-divider></el-divider>
				<el-row :gutter="20">
					<el-col :span="6" type="flex" class="row-bg" justify="space-between">
						<div v-items class="goods">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								class="image"
							/>
							<div style="padding: 10px;">
								<span>好吃的汉堡</span>
							</div>
						</div>
					</el-col>
					<el-col :span="6" type="flex" class="row-bg" justify="space-between">
						<div v-items class="goods">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								class="image"
							/>
							<div style="padding: 10px;">
								<span>好吃的汉堡</span>
							</div>
						</div>
					</el-col>
					<el-col :span="6" type="flex" class="row-bg" justify="space-between">
						<div v-items class="goods">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								class="image"
							/>
							<div style="padding: 10px;">
								<span>好吃的汉堡</span>
							</div>
						</div>
					</el-col>

					<el-col :span="6" type="flex" class="row-bg" justify="space-between">
						<div v-items class="goods">
							<img
								src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
								class="image"
							/>
							<div style="padding: 10px;">
								<span>好吃的汉堡</span>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-main>
			<el-footer>
				<el-button type="primary" v-items>上一页</el-button>
				<el-button type="primary" v-items>下一页</el-button>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
import "./epg";
export default {
	mounted() {
		//页面加载后，移动到默认焦点
		console.log("谁先执行呢");
		console.log(this.$epg, this.$service);
		this.$epg.move(this.$epg.pointer);
	},
	data() {
		return {
			currentDate: new Date(),
			list: [
				{
					imgsrc:
						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232013248,1467217970&fm=26&gp=0.jpg"
				},
				{
					imgsrc:
						"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2354576728,3039826807&fm=26&gp=0.jpg"
				},
				{
					imgsrc:
						"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg"
				}
			]
		};
	},
	components: {}
};
</script>

<style scoped>
.focus {
	border: 5px solid yellow;
	transform: scale(1.1);
	border-radius: 10px;
	box-shadow: 0px 0px 6px 2px #ffff00;
	box-sizing: border-box;
}
.home {
	width: 100%;
	height: 100%;
	background-image: url(../../assets/bg.jpg);
	background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
	position: absolute; /* 不可缺少 */
	/* overflow: hidden; */
	/* overflow: auto; */
	z-index: -1;
	background-repeat: no-repeat;
}
.el-header {
	/* background-color: #13345c; */
	color: #333;
	text-align: center;

	/* line-height: 120px; */
	margin-top: 50px;
}
.el-main {
	text-align: center;
	margin-left: 50px;
	margin-right: 50px;
	/* margin-bottom: 20px; */
}
.el-footer {
	text-align: right;
	margin-left: 50px;
	margin-right: 50px;
}
.div-inline {
	display: inline;
}
.goods {
	background-color: whitesmoke;
	border-radius: 5px;
	height: 140px;
}
.image {
	padding-top: 2px;
	padding-left: 2px;
	width: 98%;
	height: 100px;
	display: block;
}
</style>
